<!--
可能更适合单独使用
-->
<script setup lang="ts">
// 编写专用查询API
import {inject, type Ref, ref, watch} from "vue";
import {DICT_COLLECTION_SYMBOL} from "@/core/common/hooks/DictHooks";
// 根据传入的字典code，查询出来字典
const {dictCode} = defineProps(["dictCode"])
const dictCollection: Ref = inject(DICT_COLLECTION_SYMBOL, ref({}))
// 查询字典
const options = ref([])
watch(dictCollection, () => {
  console.log(DICT_COLLECTION_SYMBOL,"更新了")
  dictOnload()
})


const dictOnload = () => {
  let dict = dictCollection.value
  if (dict[dictCode]) {
    options.value = dict[dictCode]
    if (!selected.value)
      selected.value = options.value[0].value
  }
}
// 双向绑定form表单的数据
const selected = defineModel("value")
// 初始化的时候回显
dictOnload()

// 如果被清空了，就重新选择默认值
watch(selected, (newValue) => {
  if (!newValue || newValue == "") {
    selected.value = options.value[0].value
  }
})
</script>

<template>
  <a-select
      ref="select"
      v-model:value="selected"
      style="width: 120px"
      :options="options"
  ></a-select>
</template>

<style scoped>

</style>